<template>
    <div class="screen_wrapper flex-column" :style="{ fontSize: fontSize }">
        <div class="screen_header flex-row">
            <div class="header_item">
                <div class="flex-column unit_item">
                    <p class="name">分公司总数</p>
                    <p class="num">{{baseInfo.areaCount || 0}}</p>
                </div>
                <svg-icon class="item_bg" icon="screen_header_left" />
            </div>
            <div class="header_item">
                <div class="flex-column unit_item">
                    <p class="name">项目部总数</p>
                    <p class="num">{{baseInfo.deptCount || 0}}</p>
                </div>
                <svg-icon class="item_bg" icon="screen_header_left" />
            </div>
            <div class="header_item">
                <div class="flex-column unit_item">
                    <p class="name">当日施工总数</p>
                    <p class="num">{{baseInfo.workingCount || 0}}</p>
                </div>
                <svg-icon class="item_bg" icon="screen_header_left" />
            </div>
            <div class="header_center">
                <div class="header_title flex-column">
                    <h1 class="header" :style="{ '--fontSize': fontSize }">智慧施工云平台</h1>
                    <svg-icon class="item_bg" icon="screen_title" />
                </div>
            </div>
            <div class="header_item">
                <div class="flex-column unit_item">
                    <p class="name">未响应施工</p>
                    <p class="num">{{baseInfo.notWorkCount || 0}}</p>
                </div>
                <svg-icon class="item_bg" icon="screen_header_right" />
            </div>
            <div class="header_item">
                <div class="flex-column unit_item">
                    <p class="name">未完成整改数</p>
                    <p class="num">{{baseInfo.notCorrectCount || 0}}</p>
                </div>
                <svg-icon class="item_bg" icon="screen_header_right" />
            </div>
            <div class="header_item">
                <div class="flex-column unit_item">
                    <p class="name">{{ today.day }}</p>
                    <p class="num">{{ today.dayWeek }} {{ today.time }}</p>
                </div>
                <svg-icon class="item_bg" icon="screen_header_right" />
            </div>
        </div>
        <!-- 主体 -->
        <div class="screen_body flex-row">
            <div class="screen_side flex-column">
                <modal-frame class="flex-item" name="施工地图">
                    <div class="flex-item flex-row" @click="goMap()">
                        <show-map class="flex-item" />
                    </div>
                </modal-frame>
                <modal-frame class="flex-item" name="施工清单">
                    <span slot="more" @click="goScheme()">MORE>></span>
                    <scheme-list/>
                </modal-frame>
                <modal-frame class="side_long" name="施工分析">
                    <div class="flex-item flex-row">
                        <div class="flex-item" v-if="projectTypes.length">
                            <scheme-type :list="projectTypes" />
                        </div>
                        <div class="flex-item" v-if="workingStatus.length">
                            <scheme-status :list="workingStatus" />
                        </div>
                    </div>
                </modal-frame>
            </div>
            <div class="screen_middle flex-column">
                <modal-frame class="big_item" name="">
                    <fly-map/>
                    <div class="statistics_box">
                        <div class="statistics_label flex-row">
                            <span class="label">业务涉及省份</span>
                            <span class="count">{{mapInfo.areaCount}}</span>
                        </div>
                        <div class="statistics_label flex-row">
                            <span class="label">年度开工项目累计</span>
                            <span class="count">{{mapInfo.deptCount}}</span>
                        </div>
                    </div>
                    <div class="days_box flex-row">
                        <span class="label">已为您服务</span>
                        <div class="counts flex-row">
                            <span class="count" v-for="(item,i) in (mapInfo.serviceDays || '0')" :key="i">{{item}}</span>
                            <span class="count">天</span>
                        </div>
                    </div>
                </modal-frame>
                <modal-frame class="flex-item" name="一周施工增长趋势">
                    <week-trend />
                </modal-frame>
            </div>
            <div class="screen_side flex-column">
                <modal-frame class="flex-item" name="年度施工项目类型增长趋势">
                    <year-trend />
                </modal-frame>
                <modal-frame class="flex-item" name="高速路段施工量排行">
                    <road-rank/>
                </modal-frame>
                <modal-frame style="flex:2.6" name="用工分析">
                    <div class="flex-item flex-column">
                        <div class="flex-item">
                            <from-area/>
                        </div>
                        <div class="flex-item">
                            <employee-type/>
                        </div>
                    </div>
                </modal-frame>
            </div>
        </div>
    </div>
</template>
<script>
import ModalFrame from './components/model_frame.vue';
import moment from 'moment';
moment.locale('zh-cn', {
    weekdays: '星期日_星期一_星期二_星期三_星期四_星期五_星期六'.split('_'),
    weekdaysShort: '周日_周一_周二_周三_周四_周五_周六'.split('_')
});
import ShowMap from '@/views/home/components/map';
import FlyMap from './components//map.vue'
import SchemeType from './components/scheme-type.vue'
import schemeStatus from './components/scheme-status.vue'
import weekTrend from './components/week-trend.vue';
import YearTrend from './components/year-trend.vue'
import RoadRank from './components/road-rank'
import EmployeeType from './components/employee-type.vue';
import FromArea from './components/from-area.vue';
import {remoteStatistics,remoteSchemeList,remoteMapCounts} from '@/api/dashboard'
import SchemeList from './components/scheme-list.vue';
import { hasPermPage } from '@/utils/permission';

export default {
    name: 'Dashboard',
    components: {
        ModalFrame,
        ShowMap,
        FlyMap,
        SchemeType,
        schemeStatus,
        weekTrend,
        YearTrend,
        RoadRank,
        EmployeeType,
        FromArea,
        SchemeList,
    },
    data() {
        return {
            fontSize: '36px',
            timer: null,
            today: {
                day: '',
                dayWeek: '',
                time: ''
            },
            baseInfo:{},
            mapInfo:{},
            projectTypes:[],
            workingStatus:[]
        };
    },
    mounted() {
        this.setFontSize();
        this.getTimes();
        this.getBaseInfo();
        window.onresize = () => {
            this.setFontSize();
        };
    },
    beforeDestroy() {
        window.onresize = null;
        clearInterval(this.timer);
    },
    methods: {
        //施工清单
        goScheme(){
            let ishas = hasPermPage('/supervision/list/index');
            if(!ishas){
                this.$router.push('/supervision/list/index')
            }else{
                this.$message.error('暂无权限')
            }
        },
        //去往施工地图
        goMap(){
            let ishas = hasPermPage('/supervision/map/index');
            if(!ishas){
                this.$router.push('/supervision/map/index')
            }else{
                this.$message.error('暂无权限')
            }
        },
        //获取统计数据
        async getBaseInfo(){
            try{
                let res = await remoteStatistics();
                let schemeResult = await remoteSchemeList();
                let mapResult = await remoteMapCounts();
                this.baseInfo = res.data;
                this.mapInfo = mapResult.data;
                this.mapInfo.serviceDays = mapResult.data.serviceDays?(mapResult.data.serviceDays+'').split(''):'0'
                let {project_type,working_status} = schemeResult.data;
                this.projectTypes = project_type;
                this.workingStatus = working_status;
            }finally{}
        },
        //获取时间
        getTimes() {
            this.timer = setInterval(() => {
                let day = moment().format('YYYY.MM.DD');
                let time = moment().format('HH:mm:ss');
                let dayWeek = moment().format('dddd');
                this.today = {
                    day,
                    dayWeek,
                    time
                };
            }, 1000);
        },
        //根据屏幕设置字体大小
        setFontSize() {
            let width = document.documentElement.clientWidth;
            this.fontSize = (36 * width) / 1280 + 'px';
        }
    }
};
</script>
<style lang="scss" scoped>
.statistics_box{
    position: absolute;
    left: 30px;
    top: 30px;
    .statistics_label{
        margin-bottom: 10px;
        width: 160px;
        height: 32px;
        line-height: 24px;
        font-size: 13px;
        color: #333;
        background: url('~@/assets/map/label.png') no-repeat ;
        background-size: 100%;
        .label{
            width: 96px;
            text-align: center;
        }
        .count{
            margin-right: 10px;
            flex: 1;
            font-size: 16px;
            line-height: 32px;
            color: #fff;
            font-weight: bold;
            text-align: center;
        }
    }
}
.days_box{
    position: absolute;
    left: 30px;
    bottom: 30px;
    font-size: 14px;
    z-index: 99;
    padding: 10px 20px;
    align-items: center;
    background: rgba($color: #000000, $alpha: .6);
    .label{
        padding: 0 10px;
        color: #fff;
    }
    .counts{
        .count{
            margin: 0 1px;
            padding: 4px 6px;
            font-weight: 600;
            color: #fff;
            background: linear-gradient(180deg, #0058BF 0%, #3AB1FF 100%);
        }
    }
}
.side_long{
    flex: 1.4;
}
.screen_wrapper {
    width: 100vw;
    height: 100vh;
    padding: 0 20px;
    background: url('~@/assets/screen/screen_bg.png') no-repeat fixed center center;
    background-size: cover;
    box-sizing: border-box;
    .screen_header {
        flex-shrink: 0;
        height: 5.5vw;

        .header_item {
            position: relative;
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;

            .unit_item {
                position: relative;
                color: #dbfaff;
                text-align: center;
                z-index: 1;

                .num {
                    margin-top: 0.2em;
                    font-size: 0.36em;
                }

                .name {
                    font-size: 0.2em;
                }
            }
        }

        .header_center {
            position: relative;
            flex: 2.5;

            .header_title {
                position: absolute;
                left: -5%;
                top: 0;
                right: -5%;
                bottom: 0;
                text-align: center;
                align-items: center;
                justify-content: center;

                .header {
                    position: relative;
                    margin-bottom: 1vw;
                    font-size: 1em;
                    color: #dbfaff;
                    z-index: 1;
                }
            }
        }

        .item_bg {
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            width: 100%;
            height: 100%;
        }
    }
    .screen_body {
        flex: 1;
        .screen_side {
            flex: 1;
        }
        .screen_middle {
            margin: 0 20px;
            flex: 2.8;
        }
        .big_item{
            position: relative;
            flex: 2.5;
        }
    }
}
</style>
